<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="2"><el-button type="primary" round @click="showAddPaeg">添加</el-button></el-col>
      <el-col :span="2"><el-button type="danger" round @click="rowDel()">批量删除</el-button></el-col>
    </el-row>
    <el-pagination
      :page-size="page.pageSize"
      :total="page.totalCount"
      :current-page.sync="page.pageNo"
      @current-change="initTableData"
      @size-change="handleSizeChange"
      :page-sizes="[2, 3, 5, 10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!--表格内容-->
    <el-table
      ref="list"
      :data="tableData"
      style="width: 100%"
      border
      stripe
      highlight-current-row
      :default-sort="{prop: 'date', order: 'descending'}"
      @row-click="handleRowClick"
      @select-all="handleCheckedAllAndCheckedNone"
      @select="handleCheckedAllAndCheckedNone"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="45"
        align="center">
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        property="chanceSource"
        label="机会来源">
      </el-table-column>
      <el-table-column
        property="customerName"
        label="客户名称">
      </el-table-column>
      <el-table-column
        property="cgjl"
        label="成功几率">
      </el-table-column>
      <el-table-column
        property="overview"
        label="概要">
      </el-table-column>
      <el-table-column
        property="linkMan"
        label="联系人">
      </el-table-column>
      <el-table-column
        property="linkPhone"
        label="联系电话">
      </el-table-column>
      <el-table-column
        property="description"
        label="描述">
      </el-table-column>
      <el-table-column property="state" label="分配状态" >
        <template slot-scope="scope">
          <el-tag type="success" size="mini" v-if="scope.row.state === 1">开发中</el-tag>
          <el-tag type="danger" size="mini" v-else-if="scope.row.state === 0">未分配</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="devResult" label="开发结果" >
        <template slot-scope="scope">
          <el-tag type="success" size="mini" v-if="scope.row.devResult === 1">开发成功</el-tag>
          <el-tag type="danger" size="mini" v-else-if="scope.row.devResult === 0">未开发</el-tag>
          <el-tag type="danger" size="mini" v-else-if="scope.row.devResult === 2">开发中</el-tag>
          <el-tag type="danger" size="mini" v-else>开发失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="130"
        align="center">
        <template slot-scope="scope">
          <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
            @click="rowEdit(scope.$index, scope.row)"></el-button>
          <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
            @click="rowDel();"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--编辑-弹出层-->
    <el-dialog
      :title="pageName"
      :visible.sync="isShowEditDialog"
      width="430px"
      @close="dialogClose">
      <el-form
        ref="editForm"
        :model="formFileds"
        label-width="55px">
        <el-form-item label="客户名" prop="customerName">
          <el-input v-model="formFileds.customerName"></el-input>
        </el-form-item>
        <el-form-item label="来源" prop="chanceSource">
          <el-input v-model="formFileds.chanceSource" ></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="linkMan">
          <el-input v-model="formFileds.linkMan" ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="linkPhone">
          <el-input v-model="formFileds.linkPhone" ></el-input>
        </el-form-item>
        <el-form-item label="概要" prop="overview">
          <el-input v-model="formFileds.overview" ></el-input>
        </el-form-item>
        <el-form-item label="几率" prop="cgjl">
          <el-input v-model="formFileds.cgjl" ></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="formFileds.description" ></el-input>
        </el-form-item>
        <el-form-item label="指派">
          <el-select v-model="formFileds.assignMan" placeholder="请选择指派人">
            <el-option v-for="u in userData" :label="u.userName" :value="u.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleEdit()" class="pull-right margin-l-25">确定</el-button>
          <el-button @click="isShowEditDialog = false;" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "../../api/TutorialDataApi";

  export default {
    name: "Table",
    data() {
      return {
        formFileds: {},
        tableData: [],
        page: { //分页参数
          pageNo: 1,
          pageSize: 2,
          totalCount: 0
        },
        isShowEditDialog: false,
        pageName:'',
        multipleSelection:[],
        id:[],
        userData:[],
      }
    },
    methods: {
      // pageSize改变时
      handleSizeChange(val) {
        this.page.pageSize = val;
        this.initTableData();
      },
      //多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleRowClick(row, event, column) {

        // 仅选中当前行
        this.setCurRowChecked(row);
      },
      handleCheckedAllAndCheckedNone(selection) {

        // 当前选中仅一行时操作-（当前表格行高亮）
        1 != selection.length && this.$refs.list.setCurrentRow();
      },
      dialogClose() {

        // 清空编辑表单
        this.$refs.editForm.resetFields();
      },
      rowEdit(index, row) {
        this.isShowEditDialog = true;
        this.pageName='修改';
        axios.get('http://localhost:8081/chance/selectChance?id='+ row.id)
          .then(res => {
            if (res.data.code == 2000) {
              this.formFileds = res.data.data
            }
          })
      },
      handleEdit() {
        axios.post('http://localhost:8081/chance/saveChance',this.formFileds )
          .then(res => {
            if (res.data.code == 2000) {
              this.isShowEditDialog=false;
              this.initTableData();
              this.$message.success('保存成功');
            }
          })
      },
      rowDel() {
        // 让当前删除按钮失焦
        event.target.blur();
        this.$confirm('确定要删除当前行吗？', '删除', {
          comfirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          for (var i=0;i<this.multipleSelection.length;i++){
            this.id.push(this.multipleSelection[i].id)
          }
          axios.get('http://localhost:8081/chance/deleteChance?id='+ this.id)
            .then(res => {
              if (res.data.code == 2000) {
                this.initTableData()
                this.$message.success('删除成功');
              }
            })
        });
      },
      // 选中当前行-当前行的复选框被勾选
      setCurRowChecked(row) {

        this.$refs.list.clearSelection();
        this.$refs.list.toggleRowSelection(row);
      },
      //显示添加页面
      showAddPaeg(){
        this.isShowEditDialog = true;
        this.formFileds={};
        this.pageName = '添加';
      },
      initTableData() {//初始化表数据
        let url = "http://localhost:8081/chance/selectAllchance?pageNo="
          +this.page.pageNo+"&pageSize="+this.page.pageSize
        axios.get(url)
          .then(res => {
            if (res.data.code == 2000) {
              this.page.totalCount = res.data.data.total
              this.tableData = res.data.data.records
            }
          })
      },
      initUserData(){
        axios.get("http://localhost:8081/user/selectUser")
          .then(res => {
            if (res.data.code == 2000) {
              this.userData = res.data.data;
            }
          })
      },
    },
    mounted() {
      this.initTableData();
      this.initUserData();
    },
  }
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}
.el-date-editor {
  width: 100% !important;
}
</style>
